import { ReactNode } from 'react'

interface AuthLayoutProps {
  children: ReactNode
}

const AuthLayout = ({ children }: AuthLayoutProps) => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 via-pink-50 to-rose-50 relative overflow-hidden">
      {/* 背景装饰 */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-primary-200/30 to-primary-400/20 rounded-full blur-3xl animate-pulse-glow"></div>
        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-br from-rose-200/30 to-rose-400/20 rounded-full blur-3xl animate-pulse-glow" style={{ animationDelay: '1s' }}></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-br from-pink-200/20 to-pink-400/10 rounded-full blur-3xl animate-bounce-subtle"></div>
      </div>

      <div className="relative flex min-h-screen items-center justify-center">
        {/* 表单区域 */}
        <div className="w-full max-w-sm sm:max-w-md animate-slide-up p-4 sm:p-6 lg:p-8">
          {children}
        </div>
      </div>
    </div>
  )
}

export default AuthLayout